<template>
    <div class="app-container">
        <div style="text-align: right; padding-bottom:10px">
            <!-- <el-button type="primary" @click="add">添加</el-button> -->
        </div>
        <el-table :key="tableKey" v-loading="listLoading" :data="record_list" border fit highlight-current-row style="width: 100%" @sort-change="sortChange">
            <el-table-column :label="$t('table.id')" prop="id" sortable="custom" align="center" width="80" :class-name="getSortClass('id')">
                <template slot-scope="{ row }">
                    <span>{{ row.id }}</span>
                </template>
            </el-table-column>
            <el-table-column v-for="(item, index) in item_list" :key="index" :label="item.name" prop="store_name" align="center">
                <template slot-scope="{ row }">
                    <span v-if="item.type == '1'">{{ row[item.identity] }}</span>
                    <div v-if="item.type == '5'">
                        <img class="form-image" :src="asset(row[item.identity])" />
                    </div>
                </template>
            </el-table-column>
            <el-table-column :label="$t('table.actions')" align="center" width="230" class-name="small-padding fixed-width">
                <template slot-scope="{ row, $index }">
                    <!-- <el-button type="primary" size="mini" @click="handleUpdate(row)">
                        {{ $t('table.edit') }}
                    </el-button> -->
                    <el-button size="mini" type="danger" @click="handleDelete(row, $index)">
                        {{ $t("table.delete") }}
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

    </div>
</template>

<script>
import { isJSON } from '@/common/js/util'
import { asset } from '@/common/js/url'
import { list as itemList } from '@/cms/api/form/item'
import { list, deleteRecord } from '@/cms/api/form/form'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination

export default {
    components: { Pagination },
    data() {
        return {
            item_list: [],
            record_list: [],
            tableKey: 0,
            total: 0,
            listLoading: true,
            listQuery: {
                page: 1,
                limit: 20,
                importance: undefined,
                title: undefined,
                type: undefined,
                sort: '+id'
            },
            dialogFormVisible: false,
            dialogStatus: '',
            textMap: {
                update: '编辑选项',
                create: '添加选项'
            }
        }
    },
    created() {
        itemList().then(res => {
            this.item_list = res.data.items
            this.getList()
        })
    },
    methods: {
        asset(path) {
            return asset(path)
        },
        getList() {
            this.listLoading = true
            list().then((res) => {
                res.data.items.forEach(element => {
                    if(isJSON(element.content)) {
                        element = Object.assign(element, JSON.parse(element.content))
                    }
                })
                this.record_list = res.data.items
                this.listLoading = false
            })
        },
        handleDelete(row, index) {
            deleteRecord({ id: row.id }).then((res) => {
                this.$notify({
                    title: '成功',
                    message: '删除成功',
                    type: 'success',
                    duration: 2000
                })
                this.record_list.splice(index, 1)
            })
        },
        getSortClass(key) {
            const sort = this.listQuery.sort
            return sort === `+${key}` ? 'ascending' : 'descending'
        },
        sortChange(data) {
            const { prop, order } = data
            if (prop === 'id') {
                this.sortByID(order)
            }
        }
    }
}
</script>

<style scoped lang="scss">
.form-image {
    height: 50px;
}
</style>
